import React, {useEffect, useState} from 'react';
import {List, Button, Skeleton, Row, Avatar, Spin} from 'antd';
import {
    ClockCircleFilled,
    FieldTimeOutlined,
    FireFilled, LikeOutlined,
    SettingOutlined,
} from '@ant-design/icons';
import style from './index.module.css';
import hot2 from  '../../assets/img/hot2.png'
import new1 from '../../assets/img/new1.png'
const table =['点赞榜','最新发布榜']
const ListUI = (props) => {
    const [loading,setLoading]=useState(true)
    useEffect(()=>{
        if(props.data){
            setLoading(false)
        }
    },[props])
    const loadMore = loading ? (
        <div
            style={{
                textAlign: 'center',
                marginTop: 12,
                height: 32,
                lineHeight: '32px',
            }}
        >
        </div>
    ) : null;
    return (
        <div className={`${style.body}`}>
            <Spin text="请稍等" spinning={loading}/>
            <List
                header={<div className={`${style.listHeader}`}>
                    <p>{table[props.type]}</p>
                    <SettingOutlined />
                </div>}
                bordered
                loading={loading}
                loadMore={loadMore}
                dataSource={props.data}
                className={`${style.list}`}
                renderItem={
                    item =>
                        <List.Item key={item.shareId}>
                            <div className={`${style.listItem}`}>
                                <Skeleton title={false} loading={loading} active>
                                    <List.Item.Meta
                                        // avatar={<Avatar src={""} />}
                                        // title={<a href="#">{item.nickname}</a>}
                                        description={<>
                                            {item.content.slice(0,70)}
                                            <img src={props.type?new1:hot2} style={{float:'right'}}/>
                                        </>}

                                    />
                                    <Row className={`${style.data}`}>
                                        {
                                            props.type?(
                                                <>
                                                    <ClockCircleFilled/><span className={style.time}>{item.createTime}</span>
                                                </>

                                            ):(
                                                <>
                                                    <FireFilled /><span>{item.score}</span>
                                                </>
                                            )
                                        }
                                    </Row>
                                </Skeleton>
                            </div>
                        </List.Item>
                }
            />
        </div>
    )
}
export default ListUI;
